class App {
	constructor( canvasId ) {
	this.test = 333;
		this.cc = document.getElementById( canvasId ).getContext( "2d" );
		this.cc.tmp = new Object();
		this.cc.tmp.width = this.cc.canvas.width;
		this.cc.tmp.height = this.cc.canvas.height;
			
			//ガイド青枠　作成
			let div = document.createElement( "div" );
			document.body.appendChild( div );
			div.innerHTML = "ガイド青枠";
			div.setAttribute( "id", "testdiv" );
			this.test = document.getElementById( "testdiv" );
			this.test.style.border = "solid 1px blue";
			this.test.style.position = "absolute";
			this.test.style.boxSizing = "border-box";
			this.test.style.width = "200px";
			this.test.style.height = "200px";
			this.test.style.color = "blue";
			
			//リサイズについて
			let resizex = function() {
					//check.
					if( typeof this.tid !== "undefined" ) return;
					
					//check.　特に変化ないのに呼ばれた場合
					let cs = getComputedStyle( this.cc.canvas );
					if( cs.width == this.widthBak && cs.height == this.heightBak ) {
						return;
					}
					this.widthBak = cs.width;
					this.heightBak = cs.height;
					
				this.tid = setTimeout( function() {
				//	console.log( "app.resizex" );
					
					//canvasへスクロール
					if( document.getElementById( "check1" ).checked ) {
						let cr = this.cc.canvas.getBoundingClientRect();
						window.scrollTo( 0, window.scrollY + cr.top );
					}
					
					//ガイド青枠　更新
					let cr = this.cc.canvas.getBoundingClientRect();
					let tr = this.test.getBoundingClientRect();
					let x = window.scrollX + cr.left;
					let y = window.scrollY + cr.top;
						x += ( cr.width - tr.width ) / 2;
						y += ( cr.height - tr.height ) / 2;
					this.test.style.left = x + "px";
					this.test.style.top = y + "px";
					
					delete this.tid;
				}.bind( this ), 500 );
			}.bind( this );
			resizex();
			addEventListener( "resize", resizex );


	}
	start() {
		this.timerId = setInterval( this.frame.bind( this ), 100 );
	}
	stop() {
		clearInterval( this.timerId );
	}
	frame() {
		this.draw( this.cc );
	}
	draw( cc ) {
		cc.clearRect( 0, 0, cc.tmp.width, cc.tmp.height );
		cc.lineWidth = 4;
		cc.fillStyle = "gray";
		cc.fillRect( 0, 0, cc.tmp.width, cc.tmp.height );
		cc.beginPath();
		cc.arc( cc.tmp.width / 2, cc.tmp.height / 2, 100, 0, 6.28, false );
		cc.closePath();
		cc.stroke();
		
		cc.beginPath();
		cc.moveTo( 0, 0 );
		cc.lineTo( cc.tmp.width, cc.tmp.height );
		cc.closePath();
		cc.stroke();
		
		cc.fillStyle = "orange";
		cc.font = "32px''";
		cc.fillText( "type: " + this.debug.type, 4,64 );
	}
}